<template>
  <view class="container">
    <view class="title">作业题目</view>
    <textarea cols="30" rows="30" v-model="content" class="content" maxlength="-1" placeholder="请输入作业题目"></textarea>
    <!-- 上传图片容器 -->
    <view class="box">
      <image :src="imgUrl + pic" v-if="pic != ''" mode="aspectFill" style="width: 220rpx; height: 220rpx"></image>
      <view class="imagebox" v-else><image src="../../static/icon/upload.png" @click="upimage" mode="aspectFill"></image></view>
    </view>
    <view class="tip">题目可通过输入框输入也可选择拍照上传</view>
    <!-- 教师拍照打卡 -->
    <view class="box">
      <image :src="imgUrl + teacherimg" v-if="teacherimg != ''" mode="aspectFill" style="width: 220rpx; height: 220rpx"></image>
      <view class="imagebox" v-else><image src="../../static/icon/upload.png" @click="upimage2" mode="aspectFill"></image></view>
    </view>
    <view class="tip">教师拍照打卡</view>
    <view style="display: flex; box-sizing: border-box; padding: 20rpx">
      <view style="font-size: 30rpx; font-weight: 700">作业的提交截止时间：</view>
      <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
        <view class="uni-input">{{ endtime == '' ? '请选择截止时间' : endtime }}</view>
      </picker>
    </view>

    <view class="submit" @click="submit">提交</view>
  </view>
</template>

<script>
export default {
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  data() {
    const currentDate = this.getDate({
      format: true
    });
    return {
      content: '',
      pic: '',
      order_id: '',
      endtime: '',
      imgUrl: '',
      teacherimg: ''
    };
  },
  methods: {
    submit() {
      if (this.content == '' || this.pic == '') {
        return uni.showToast({
          title: '请填写作业的题目或上传作业图片',
          icon: 'none'
        });
      }
      if (this.teacherimg == '') {
        return uni.showToast({
          title: '请拍照打卡',
          icon: 'none'
        });
      }
      if (this.endtime == '') {
        return uni.showToast({
          title: '请选择作业的截止提交时间',
          icon: 'none'
        });
      }

      uni.$http
        .post('/homework/add', {
          order_id: this.order_id,
          endtime: this.endtime,
          content: this.content,
          pic: this.pic,
          check_pic: this.teacherimg
        })
        .then((res) => {
          if (res.data.code == 1) {
            uni.redirectTo({
              url: '/teacher/mystudents/mystudents'
            });
          }
        });
    },
    upimage2() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        success: (res) => {
          console.log(res.tempFiles);
          console.log(res.tempFiles[0].tempFilePath);
          uni.uploadFile({
            url: this.upimg + '/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: uni.getStorageSync('token')
            },
            success: (res3) => {
              console.log(JSON.parse(res3.data));
              this.teacherimg = JSON.parse(res3.data).data.url;
            }
          });
        }
      });
    },
    upimage() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        success: (res) => {
          console.log(res.tempFiles);
          console.log(res.tempFiles[0].tempFilePath);
          uni.uploadFile({
            url: this.upimg + '/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: uni.getStorageSync('token')
            },
            success: (res3) => {
              console.log(JSON.parse(res3.data));
              this.pic = JSON.parse(res3.data).data.url;
            }
          });
        }
      });
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 60;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange(e) {
      console.log(e);
      this.endtime = e.detail.value;
    }
  },
  onLoad(e) {
    this.imgUrl = this.imgurl;
    console.log(e.id);
    if (e.id) {
      this.order_id = e.id;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;

  .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #333333;
    margin: 28rpx 0 20rpx 30rpx;
  }
  .content {
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    background: #f8f8f8;
    font-size: 28rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    margin: 20rpx 30rpx;
    padding: 26rpx 30rpx;
  }
  .box {
    box-sizing: border-box;
    display: flex;
    margin: 20rpx 30rpx;
    .imagebox {
      width: 220rpx;
      height: 220rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .tip {
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #999999;
    margin: 20rpx 30rpx;
  }
  .submit {
    box-sizing: border-box;
    position: absolute;
    bottom: 80rpx;
    left: 40rpx;
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    background: #3553e8;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>
